Skip to main content

Styling in Catalyst

Catalyst offers a variety of methods for styling your application, each with its own advantages:

Global css​

Global styles can be imported into any layout, page, or component.

This approach is straightforward and familiar to those with experience in traditional CSS. However, it may result in larger CSS bundles and challenges in managing styles as the application scales.

  • Place all your global css in /src/static/css/base .
  • Placing css in /src/static/css/base would prevent it from being modularized as css-module is enabled by default in Catalyst.
  • Import these global css file in client/styles.js so that it can be available globally.

All the css written in src/static/css/base/layout.css will be available globally.

CSS-module​

Catalyst enables support for css-module out-of-the-box. CSS-modules locally scope CSS by creating unique names. This allows you to use same classnames in different files without worrying about naming conflicts.

CSS Modules can be utilized in any file within the app directory.

Sass​

As a widely-used CSS preprocessor, Sass augments CSS with capabilities such as variables, nested rules, and mixins.

Catalyst includes out-of-the-box support for Sass. Utilize Sass in Catalyst with the .scss file extension.

Note:​

You can seamlessly integrate any style library that doesn't require a build setup, simplifying the process of enhancing your project's visual presentation. For example, Material UI or Tailwind, among others.

Interactive Styling Demo​

Advanced Styling Features

This example demonstrates Catalyst's advanced styling capabilities including SCSS, CSS modules, dynamic theming, and responsive design patterns.

Styling Benefits

🎨 SCSS Power

Variables, mixins, nesting, and advanced CSS features

📱 Responsive Design

Mobile-first approach with flexible layouts

🌙 Theme Support

Light/dark mode with CSS custom properties

Dynamic Theming

Switch between light and dark themes with CSS custom properties

Theme Preview

Current theme: light

Sample Card

This card adapts to the selected theme using CSS custom properties.

Responsive Design

Responsive layout that adapts to different screen sizes

📱 Mobile
Header
Content
Footer
📱 Tablet
Sidebar
Main Content
💻 Desktop
Header
Sidebar
Main Content

SCSS Features & CSS Modules

Component-scoped styles with SCSS variables, mixins, and nesting

🎨 Variables

Centralized color and spacing variables

🔧 Mixins

Reusable style patterns and functions

📦 Nesting

Nested Elements

Logical CSS structure with nesting

Code Examples

SCSS Variables (src/static/css/resources/_variables.scss)

// src/static/css/resources/_variables.scss
$primary-color: #007bff;
$secondary-color: #6c757d;
$success-color: #28a745;
$danger-color: #dc3545;

$font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
$font-size-base: 1rem;
$line-height-base: 1.5;

$border-radius: 4px;
$border-radius-lg: 8px;
$border-radius-sm: 2px;

$spacing-unit: 1rem;
$container-max-width: 1200px;

CSS Modules with SCSS (Component.module.scss)

// Component.module.scss
.container {
  padding: $spacing-unit;
  border-radius: $border-radius;
  background: var(--ifm-background-color);
  border: 1px solid var(--ifm-color-emphasis-300);
}

.button {
  @include button-mixin;
  
  &.primary {
    background: $primary-color;
    color: white;
    
    &:hover {
      background: darken($primary-color, 10%);
    }
  }
  
  &.secondary {
    background: $secondary-color;
    color: white;
  }
}

// Responsive design
@media (max-width: 768px) {
  .container {
    padding: $spacing-unit * 0.5;
  }
}

SCSS Mixins (src/static/css/resources/_mixins.scss)

// src/static/css/resources/_mixins.scss
@mixin button-mixin {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: $border-radius;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.2s ease;
  font-weight: 500;
  
  &:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
}

@mixin responsive-grid($columns: 3, $gap: 1rem) {
  display: grid;
  grid-template-columns: repeat($columns, 1fr);
  gap: $gap;
  
  @media (max-width: 768px) {
    grid-template-columns: 1fr;
  }
}

@mixin theme-aware {
  background: var(--ifm-background-color);
  color: var(--ifm-font-color-base);
  border-color: var(--ifm-color-emphasis-300);
}

Live Examples​

Complete Styling Showcase

Interactive demo with CSS Modules, SCSS, dynamic theming, animations, and responsive design

📄StylingDemo.js
▶
⚙
Explorer
📂src
📂js
📁components
📂pages
📄StylingDemo.js
📁routes
📁store
📁public
📄package.json
1import React from 'react'
2import { useCurrentRouteData } from '@tata1mg/router'
3import styles from './styles.module.css'
4 
5const ComponentName = () => {
6 const { data, error, isFetching } = useCurrentRouteData()
7 
8 if (isFetching) return <div>Loading...</div>
9 if (error) return <div>Error: {error.message}</div>
10 
11 return (
12 <div className={styles.container}>
13 <h1>Welcome to Catalyst</h1>
14 <p>This is a live code example.</p>
15 </div>
16 )
17}
18 
19export default ComponentName

Loading CodeSandbox...